<template>
  <view class="isometric-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <uni-icons type="left" size="24" color="#fff" class="back-icon" @click="handleBack"></uni-icons>
      <text class="nav-title">在线问诊中心</text>
    </view>

    <!-- 主体内容：等距布局的问诊模块 -->
    <view class="main-content">
      <!-- 左侧：问诊类型与筛选区 -->
    <view class="module left-module">
        <text class="module-title">问诊类型</text>
        
        <!-- 问诊类型选择 -->
        <view class="consult-type-list">
          <view 
            class="consult-type-item" 
            :class="{ active: activeConsultType === 'general' }"
            @click="setConsultType('general')"
          >
            <uni-icons type="user-md" size="20" color="#6b7fd7" class="type-icon"></uni-icons>
            <text class="type-name">普通问诊</text>
          </view>
          <view 
            class="consult-type-item" 
            :class="{ active: activeConsultType === 'specialist' }"
            @click="setConsultType('specialist')"
          >
            <uni-icons type="stethoscope" size="20" color="#6b7fd7" class="type-icon"></uni-icons>
            <text class="type-name">专科问诊</text>
          </view>
          <view 
            class="consult-type-item" 
            :class="{ active: activeConsultType === 'emergency' }"
            @click="setConsultType('emergency')"
          >
            <uni-icons type="ambulance" size="20" color="#6b7fd7" class="type-icon"></uni-icons>
            <text class="type-name">紧急问诊</text>
          </view>
          <view 
            class="consult-type-item" 
            :class="{ active: activeConsultType === 'followup' }"
            @click="setConsultType('followup')"
          >
            <uni-icons type="refresh" size="20" color="#6b7fd7" class="type-icon"></uni-icons>
            <text class="type-name">复诊问诊</text>
          </view>
        </view>

        <!-- 科室筛选 -->
        <!-- <view class="filter-section">
          <text class="filter-title">选择科室</text>
          <view class="dept-selector">
            <uni-select 
              v-model="activeDept" 
              :options="deptOptions"
              @change="handleDeptChange"
            ></uni-select>
          </view>
        </view> -->

        <!-- 筛选条件 -->
       <!-- <view class="filter-section">
          <text class="filter-title">筛选条件</text>
          <view class="filter-checks">
            <view class="filter-check">
              <uni-checkbox v-model="filterParams.hasReport" />
              <text class="check-text">可看报告</text>
            </view>
            <view class="filter-check">
              <uni-checkbox v-model="filterParams.isOnline" />
              <text class="check-text">正在线</text>
            </view>
            <view class="filter-check">
              <uni-checkbox v-model="filterParams.hasPrescription" />
              <text class="check-text">可开处方</text>
            </view>
          </view> -->
    </view>

        <!-- 快速预约 -->
        <view class="quick-appoint-btn" @click="showQuickAppoint">
          <uni-icons type="plus-circle" size="18" color="#fff" class="appoint-icon"></uni-icons>
          <text class="appoint-text">快速预约问诊</text>
        </view>
    </view>

      <!-- 中间：医生列表区 -->
      <view class="module center-module">
        <text class="module-title">推荐医生</text>
        
        <!-- 医生列表 -->
        <view class="doctor-list">
          <view 
            class="doctor-item" 
            v-for="(doctor, index) in filteredDoctors" 
            :key="index"
          >
            <view class="doctor-header">
              <view class="doctor-avatar">
                <uni-icons type="person" size="40" color="#fff"></uni-icons>
              </view>
              <view class="doctor-base-info">
                <view class="name-level">
                  <text class="doctor-name">{{ doctor.name }}</text>
                  <text class="doctor-level">{{ doctor.level }}</text>
                </view>
                <text class="doctor-dept">{{ doctor.dept }} · {{ doctor.hospital }}</text>
                <view class="doctor-tags">
                  <text class="tag-item" v-for="(tag, i) in doctor.tags" :key="i">{{ tag }}</text>
                </view>
              </view>
              <view class="online-status" :class="doctor.isOnline ? 'online' : 'offline'">
                {{ doctor.isOnline ? '在线' : '离线' }}
              </view>
            </view>

            <view class="doctor-stats">
              <view class="stat-item">
                <text class="stat-value">{{ doctor.consultCount }}</text>
                <text class="stat-label">问诊量</text>
              </view>
              <view class="stat-item">
                <text class="stat-value">{{ doctor.rating }}</text>
                <text class="stat-label">评分</text>
              </view>
              <view class="stat-item">
                <text class="stat-value">{{ doctor.responseTime }}</text>
                <text class="stat-label">响应</text>
              </view>
            </view>

            <view class="doctor-actions">
              <view class="action-btn chat-btn" @click="startChat(doctor)">立即咨询</view>
              <view class="action-btn appoint-btn" @click="appointDoctor(doctor)">预约问诊</view>
            </view>
          </view>
        </view>

        <!-- 空状态提示 -->
        <view class="empty-tip" v-if="filteredDoctors.length === 0">
          <uni-icons type="user-o" size="48" color="#ccc"></uni-icons>
          <text class="empty-text">暂无符合条件的医生</text>
        </view>
      </view>

      <!-- 右侧：问诊记录与服务区 -->
      <view class="module right-module">
        <text class="module-title">问诊服务</text>
        
        <!-- 我的问诊记录 -->
        <view class="consult-record-section">
          <text class="section-title">我的问诊</text>
          <view class="record-tabs">
            <view 
              class="record-tab" 
              :class="{ active: activeRecordTab === 'pending' }"
              @click="setActiveRecordTab('pending')"
            >
              待接诊
              <text class="tab-badge" v-if="pendingCount > 0">{{ pendingCount }}</text>
            </view>
            <view 
              class="record-tab" 
              :class="{ active: activeRecordTab === 'ongoing' }"
              @click="setActiveRecordTab('ongoing')"
            >
              问诊中
              <text class="tab-badge" v-if="ongoingCount > 0">{{ ongoingCount }}</text>
            </view>
            <view 
              class="record-tab" 
              :class="{ active: activeRecordTab === 'completed' }"
              @click="setActiveRecordTab('completed')"
            >
              已完成
            </view>
          </view>

          <view class="record-list">
            <view 
              class="record-item" 
              v-for="(record, index) in filteredRecords" 
              :key="index"
              @click="viewRecordDetail(record)"
            >
              <text class="record-doctor">{{ record.doctorName }}</text>
              <text class="record-time">{{ record.createTime }}</text>
              <text class="record-status" :class="getRecordStatusClass(record.status)">{{ record.statusText }}</text>
            </view>
          </view>
        </view>

        <!-- 问诊须知 -->
        <view class="notice-section">
          <text class="section-title">问诊须知</text>
          <view class="notice-content">
            <text class="notice-item">• 普通问诊响应时间一般为10-30分钟</text>
            <text class="notice-item">• 紧急问诊请选择"紧急问诊"类型</text>
            <text class="notice-item">• 问诊前请准备好相关检查报告</text>
            <text class="notice-item">• 处方药需医生诊断后开具</text>
          </view>
        </view>

        <!-- 客服帮助 -->
        <view class="service-btn" @click="contactService">
          <uni-icons type="headphones" size="18" color="#fff" class="service-icon"></uni-icons>
          <text class="service-text">问诊客服帮助</text>
        </view>
      </view>
 
</view>  
</template>


<script setup>
import { ref, computed } from 'vue';

// 导航返回
const handleBack = () => {
  uni.navigateBack({ delta: 1 });
};

// 问诊类型选择
const activeConsultType = ref('general');
// 科室筛选
const activeDept = ref('all');
const deptOptions = ref([
  { value: 'all', text: '全部科室' },
  { value: 'internal', text: '内科' },
  { value: 'surgery', text: '外科' },
  { value: 'pediatrics', text: '儿科' },
  { value: 'gynecology', text: '妇科' },
  { value: 'dermatology', text: '皮肤科' }
]);
// 筛选参数
const filterParams = ref({
  hasReport: false,
  isOnline: true,
  hasPrescription: false
});

// 医生数据
const doctorDatas = ref([
  {
    id: 1,
    name: '吴医生',
    level: '主治医师',
    dept: '内科',
    hospital: '市中心医院',
    tags: ['擅长感冒', '可看报告', '可开处方'],
    isOnline: true,
    consultCount: 1286,
    rating: 4.9,
    responseTime: '5分钟'
  },
  {
    id: 2,
    name: '梁医生',
    level: '副主任医师',
    dept: '外科',
    hospital: '第一人民医院',
    tags: ['擅长骨科', '可看报告'],
    isOnline: true,
    consultCount: 956,
    rating: 4.8,
    responseTime: '8分钟'
  },
  {
    id: 3,
    name: '晓院士',
    level: '主任医师',
    dept: '心血管内科',
    hospital: '第二人民医院',
    tags: ['擅长心脏病', '可看报告', '可开处方'],
    isOnline: false,
    consultCount: 2358,
    rating: 4.9,
    responseTime: '10分钟'
  },
  {
    id: 4,
    name: '李医生',
    level: '主治医师',
    dept: '儿科',
    hospital: '儿童医院',
    tags: ['擅长儿科常见病', '可看报告'],
    isOnline: true,
    consultCount: 1568,
    rating: 4.7,
    responseTime: '6分钟'
  }
]);

// 筛选后的医生
const filteredDoctors = computed(() => {
  return doctorDatas.value.filter(doctor => {
    // 科室筛选
    if (activeDept.value !== 'all' && doctor.dept !== getDeptText(activeDept.value)) return false;
    // 在线筛选
    if (filterParams.value.isOnline && !doctor.isOnline) return false;
    // 可看报告筛选
    if (filterParams.value.hasReport && !doctor.tags.includes('可看报告')) return false;
    // 可开处方筛选
    if (filterParams.value.hasPrescription && !doctor.tags.includes('可开处方')) return false;
    return true;
  });
});

// 科室值转文本
const getDeptText = (deptValue) => {
  const deptMap = {
    'internal': '内科',
    'surgery': '外科',
    'pediatrics': '儿科',
    'gynecology': '妇科',
    'dermatology': '皮肤科'
  };
  return deptMap[deptValue] || '';
};

// 问诊记录数据
const consultRecords = ref([
  {
    id: 1,
    doctorName: '吴医生',
    createTime: '2024-05-20 14:30',
    status: 'pending',
    statusText: '待接诊'
  },
  {
    id: 2,
    doctorName: '梁医生',
    createTime: '2024-05-18 09:15',
    status: 'ongoing',
    statusText: '问诊中'
  },
  {
    id: 3,
    doctorName: '晓院士',
    createTime: '2024-05-15 16:40',
    status: 'completed',
    statusText: '已完成'
  }
]);

// 记录标签切换
const activeRecordTab = ref('pending');
// 记录统计
const pendingCount = computed(() => consultRecords.value.filter(r => r.status === 'pending').length);
const ongoingCount = computed(() => consultRecords.value.filter(r => r.status === 'ongoing').length);

// 筛选后的记录
const filteredRecords = computed(() => {
  return consultRecords.value.filter(record => record.status === activeRecordTab.value);
});

// 事件处理
const setConsultType = (type) => { activeConsultType.value = type; };
const handleDeptChange = (e) => { activeDept.value = e.detail.value; };
const setActiveRecordTab = (tab) => { activeRecordTab.value = tab; };

// 医生操作
const startChat = (doctor) => {
  if (!doctor.isOnline) {
    uni.showToast({ title: `${doctor.name}当前不在线，可预约问诊`, icon: 'none' });
    return;
  }
  uni.showToast({ title: `开始咨询${doctor.name}`, icon: 'none' });
};
const appointDoctor = (doctor) => {
  uni.showToast({ title: `预约${doctor.name}问诊`, icon: 'none' });
};

// 快速预约
const showQuickAppoint = () => {
  uni.showToast({ title: '打开快速预约面板', icon: 'none' });
};

// 记录操作
const viewRecordDetail = (record) => {
  uni.showToast({ title: `查看与${record.doctorName}的问诊记录`, icon: 'none' });
};

// 记录状态样式
const getRecordStatusClass = (status) => {
  switch (status) {
    case 'pending': return 'status-pending';
    case 'ongoing': return 'status-ongoing';
    case 'completed': return 'status-completed';
    default: return '';
  }
};

// 客服帮助
const contactService = () => {
  uni.showToast({ title: '联系问诊客服', icon: 'none' });
};
</script>

<style scoped>
/* 全局容器：等距视角背景 */
.isometric-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 20px;
}

/* 顶部导航栏 */
.nav-bar {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  border-radius: 12px;
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(107, 127, 215, 0.2);
}

.back-icon {
  cursor: pointer;
}

.nav-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  flex: 1;
  text-align: center;
}

/* 主体内容布局 */
.main-content {
  display:block;
  justify-content: space-between;
  gap: 20px;
}

.module {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
  flex: 1;
}

.module-title {
  font-size: 16px;
  font-weight: bold;
  color: #6b7fd7;
  margin-bottom: 15px;
  display: block;
}

/* 左侧：问诊类型与筛选区 */
.consult-type-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.consult-type-item {
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 12px 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.consult-type-item.active {
  background: linear-gradient(135deg, #e6eaf5, #f0f2fa);
  border-left: 3px solid #6b7fd7;
}

.type-icon {
  margin-right: 12px;
}

.type-name {
  font-size: 14px;
  color: #333;
}

.filter-section {
  margin-bottom: 20px;
}

.filter-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  display: block;
}

.dept-selector {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 0 15px;
}

.filter-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-check {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.check-text {
  margin-left: 8px;
}

.quick-appoint-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: #ffffff;
  border-radius: 8px;
  padding: 12px 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-appoint-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.appoint-icon {
  margin-right: 10px;
}

.appoint-text {
  font-size: 14px;
  font-weight: 500;
}

/* 中间：医生列表区 */
.doctor-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.doctor-item {
  background: linear-gradient(135deg, #e6eaf5, #f0f2fa);
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s ease;
}

.doctor-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(107, 127, 215, 0.1);
}

.doctor-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.doctor-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.doctor-base-info {
  flex: 1;
}

.name-level {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.doctor-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-right: 10px;
}

.doctor-level {
  font-size: 12px;
  color: #6b7fd7;
  background-color: #e6eaf5;
  padding: 2px 6px;
  border-radius: 4px;
}

.doctor-dept {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
  display: block;
}

.doctor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tag-item {
  font-size: 10px;
  color: #6b7fd7;
  background-color: #e6eaf5;
  padding: 2px 6px;
  border-radius: 4px;
}

.online-status {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 4px;
}

.online {
  background-color: #e6f7ef;
  color: #45b787;
}

.offline {
  background-color: #f5f5f5;
  color: #999;
}

.doctor-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding: 0 5px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 14px;
  font-weight: bold;
  color: #6b7fd7;
  margin-bottom: 3px;
}

.stat-label {
  font-size: 10px;
  color: #666;
}

.doctor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.action-btn {
  padding: 8px 15px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chat-btn {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: #ffffff;
}

.appoint-btn {
  background-color: #ffffff;
  color: #6b7fd7;
  border: 1px solid #6b7fd7;
}

.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  color: #ccc;
}

.empty-text {
  margin-top: 15px;
  font-size: 14px;
}

/* 右侧：问诊记录与服务区 */
.consult-record-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #666;
  margin-bottom: 10px;
  display: block;
}

.record-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}

.record-tab {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  position: relative;
}

.record-tab.active {
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: #ffffff;
}

.tab-badge {
  position: absolute;
  top: -3px;
  right: 10px;
  background-color: #e74c3c;
  color: #ffffff;
  font-size: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.record-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.record-item {
  background-color: #f5f7fa;
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.record-item:hover {
  background-color: #e6eaf5;
}

.record-doctor {
  font-size: 14px;
  color: #333;
  margin-bottom: 3px;
  display: block;
}

.record-time {
  font-size: 10px;
  color: #999;
  margin-right: 10px;
}

.record-status {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  float: right;
}

.status-pending {
  background-color: #fff3e0;
  color: #f59a23;
}

.status-ongoing {
  background-color: #e3f2fd;
  color: #2196f3;
}

.status-completed {
  background-color: #e6f7ef;
  color: #45b787;
}

.notice-section {
  margin-bottom: 20px;
}

.notice-content {
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 12px;
}

.notice-item {
  font-size: 12px;
  color: #666;
  display: block;
  margin-bottom: 6px;
}

.service-btn {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #6b7fd7, #8a5cf6);
  color: #ffffff;
  border-radius: 8px;
  padding: 12px 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.service-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.service-icon {
  margin-right: 10px;
}

.service-text {
  font-size: 14px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
}
</style>